<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="simpleFunnel">
            <el-form-item label="距左侧">
               <el-input v-model="simpleFunnel.left" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距右侧">
               <el-input v-model="simpleFunnel.right" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距顶部">
               <el-input v-model="simpleFunnel.top" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距底部">
               <el-input v-model="simpleFunnel.bottom" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="最小值">
                <el-input-number v-model="simpleFunnel.min" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="最大值">
                <el-input-number v-model="simpleFunnel.max" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item label="最小尺寸">
               <el-input v-model="simpleFunnel.minSize" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="最大尺寸">
               <el-input v-model="simpleFunnel.maxSize" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="间隔">
               <el-input v-model="simpleFunnel.gap" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="排序">
               <el-select v-model="simpleFunnel.sort" placeholder="descending" size="mini">
                <el-option label="降序" value="descending"/>
                <el-option label="升序" value="ascending"/>
                <el-option label="不排序" value="none"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="对齐方式">
               <el-select v-model="simpleFunnel.funnelAlign" placeholder="center" size="mini">
                <el-option label="居中对齐" value="center"/>
                <el-option label="左对齐" value="left"/>
                <el-option label="右对齐" value="right"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">标签</el-divider>
            <el-divider content-position="left">普通样式</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="simpleFunnel.label.show" :label="true">是</el-radio>
              <el-radio v-model="simpleFunnel.label.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="位置">
               <el-select v-model="simpleFunnel.label.position" placeholder="center" size="mini">
                <el-option label="内部" value="inner"/>
                <el-option label="左侧" value="left"/>
                <el-option label="右侧" value="right"/>
              </el-select>
            </el-form-item>
            <el-form-item label="格式">
              <el-input v-model="simpleFunnel.label.formatter" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="simpleFunnel.label.fontFamily" placeholder="serif" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="simpleFunnel.label.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="simpleFunnel.label.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="left">强调样式</el-divider>
            <el-form-item label="格式">
              <el-input v-model="simpleFunnel.emphasis.label.formatter" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="simpleFunnel.emphasis.label.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="simpleFunnel.emphasis.label.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="left">标签引导线</el-divider>
            <el-form-item  label="长度">
                <el-input-number v-model="simpleFunnel.labelLine.length" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="simpleFunnel.labelLine.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="simpleFunnel.labelLine.lineStyle.type" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">边框</el-divider>
            <el-form-item label="颜色">
              <el-color-picker v-model="simpleFunnel.itemStyle.borderColor" show-alpha size="small" @active-change="itemStyleBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="simpleFunnel.itemStyle.borderWidth" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="simpleFunnel.itemStyle.borderType" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">阴影</el-divider>
            <el-form-item  label="颜色">
              <el-color-picker v-model="simpleFunnel.itemStyle.shadowColor" show-alpha size="small" @active-change="itemStyleShadowColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="模糊">
              <el-input-number v-model="simpleFunnel.itemStyle.shadowBlur" :min="-20" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="水平偏移">
              <el-input-number v-model="simpleFunnel.itemStyle.shadowOffsetX" :min="-20" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="垂直偏移">
              <el-input-number v-model="simpleFunnel.itemStyle.shadowOffsetY" :min="-20" :max="20" size="mini"></el-input-number>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    itemStyleBorderColor (val) {
      this.simpleFunnel.itemStyle.borderColor = val
    },
    itemStyleShadowColor (val) {
      this.simpleFunnel.itemStyle.shadowColor = val
    }
  },
  computed: {
    simpleFunnel () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.simpleFunnel
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
